<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>番剧放送</title>
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
	
	<!-- ZUI 标准版压缩后的 CSS 文件 -->
	<link rel="stylesheet" href="/css/zui.min.css">
	<link rel="stylesheet" href="/css/chosen.min.css">		
	<!-- custom css -->
	<link rel="stylesheet" type="text/css" href="/css/index.css">
</head>
<body>

<div class="container-fixed">

<#include "menu.html">

<div class="row tab-acg">
	<div class="col-md-2">
		<ul class="nav nav-tabs nav-stacked">
		  <li class="active"><a href="###" data-target="#tab2Content1" data-toggle="tab">周一</a></li>
		  <li><a href="###" data-target="#tab2Content2" data-toggle="tab">周二</a></li>
		  <li><a href="###" data-target="#tab2Content3" data-toggle="tab">周三</a></li>
		  <li><a href="###" data-target="#tab2Content4" data-toggle="tab">周四</a></li>
		  <li><a href="###" data-target="#tab2Content5" data-toggle="tab">周五</a></li>
		  <li><a href="###" data-target="#tab2Content6" data-toggle="tab">周六</a></li>
		  <li><a href="###" data-target="#tab2Content7" data-toggle="tab">周日</a></li>
		</ul>
	</div>
	<div class="col-md-10">
		<div class="tab-content">
		  <div class="tab-pane fade active in" id="tab2Content1"></div>  
		  <div class="tab-pane fade" id="tab2Content2"></div>
		  <div class="tab-pane fade" id="tab2Content3"></div>
		  <div class="tab-pane fade" id="tab2Content4"></div>
		  <div class="tab-pane fade" id="tab2Content5"></div>
		  <div class="tab-pane fade" id="tab2Content6"></div>
		  <div class="tab-pane fade" id="tab2Content7"></div>
		</div>
	</div>
</div>
	
</div>

</body>

<!-- ZUI Javascript 依赖 jQuery -->
<script type="text/javascript" src="/js/jquery.js"></script>
<!-- ZUI 标准版压缩后的 JavaScript 文件 -->
<script type="text/javascript" src="/js/zui.min.js"></script>
<!-- Art-Template.js -->
<script type="text/javascript" src="/js/template-web.min.js"></script>


<script id="acg-list-template" type="text/html">
	<div class="col-md-2">
		<ul class="nav nav-tabs nav-stacked">
		  {{each weekList week idx}}
		  <li {{if week.isToday}}class="active"{{/if}}><a href="javascript:;" data-target="#tab2Content{{idx}}" data-toggle="tab">{{week.week}}</a></li>
		  {{/each}}
		</ul>
	</div>
	<div class="col-md-10">
		<div class="tab-content">
		  {{each weekList week idx}}
		  <div class="tab-pane fade {{if week.isToday}}active{{/if}} in" id="tab2Content{{idx}}">	       
		  		<div class="items items-hover">
				  {{each week.list item idx}}
				  <div class="item">
				    <div class="item-heading">
					  {{if item.isNew}}
				      <div class="pull-right label label-badge label-success"><small>New</small></div>
				      {{/if}}
				      <h4><a href="/home?wd={{item.nameCn}}">{{item.nameCn}}</a>&emsp;<small class="text-muted text">{{@item.nameJp}}</small></h4>
				    </div>
				    <div class="item-content">
						<table class="table table-borderless table-auto">
							<tbody>
						    <tr>
						      <td><strong>播出时间：</strong> {{item.week}} {{item.time}}</td>
						      <td><strong>信息：</strong> <a href="{{item.officalSite}}">官网</a> / <a href="{{item.bangumiSite}}">番组计划</a></td>
						    </tr>
						    <tr>
							  <td><strong>开播日期：</strong> {{item.beginDate}}</td>
						      <td><strong>配信：</strong> 
						      {{each item.sites site idx}}<a href="{{site.url}}">{{site.name}}</a> / {{/each}}
						      </td>
						    </tr>
						  </tbody>
						</table>
					</div>
				  </div>
				  {{/each}}
				</div>     
		  </div>
		  {{/each}}
		</div>
	</div>

</script>


<!-- 自定义脚本 -->
<script>
	
highlightMenu('acg');

$(function(){

// 请求直播列表
$.ajax({
	type: "GET",
    url: "/acg/list",
    dataType: "json",
    success: function(data){
      	let result = template('acg-list-template',{'weekList' : data});  //===注意点:  模板上得rows要跟template上得rows对应
        $('.tab-acg').html(result) //===直接赋值就可以实现了
    },
    error: function(err){
		 console.log('服务器开小差，请联系管理员');
	}
});	
	
});

</script>
</html>